<template>
    <div class="list-item" :class="activeFlag ? 'active' : ''">
        <div v-handle class="handleElement"></div>
        <span style="position: absolute;height: 100%;width: 100%;z-index: 7;" @click="clickFn"></span>
        <span class="closeItem" @click="close">&times;</span>
        <span class="addItems addItems1" @click="addNewItemsUp">+</span>
        <span class="addItems addItems2" @click="addNewItemsDown">+</span>
        <slot></slot>
    </div>
</template>

<script>
import { ElementMixin, HandleDirective } from "vue-slicksort";
export default {
    mixins: [ElementMixin],
    directives: { handle: HandleDirective },
    props: ["activeIndex", "activeFlag"],
    data() {
        return {};
    },
    methods: {
        close() {
            this.$emit("closeFn");
        },
        clickFn() {
            this.$emit("selected");
        },
        addNewItemsUp(e) {
            this.$emit("addNewItemsUp");
        },
        addNewItemsDown(e) {
            this.$emit("addNewItemsDown");
        }
    }
};
</script>

<style scoped lang='less'>
.list-item {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    cursor: pointer;
    &:hover {
        .closeItem {
            display: block;
        }
        .addItems {
            display: block;
        }
        .handleElement {
            border-top: 1px solid #3399ff;
            border-bottom: 1px solid #3399ff;
            border-right: 1px dashed #3399ff;
            border-left: 1px dashed #3399ff;
        }
    }
    .closeItem {
        display: none;
        position: absolute;
        right: -10px;
        top: -10px;
        height: 20px;
        width: 20px;
        background-color: #999;
        text-align: center;
        line-height: 20px;
        border-radius: 50%;
        color: #fff;
        font-size: 14px;
        cursor: pointer;
        z-index: 100;
    }
    .addItems {
        display: none;
        position: absolute;
        right: 45%;
        height: 20px;
        width: 20px;
        background-color: #3399ff;
        text-align: center;
        line-height: 20px;
        border-radius: 50%;
        color: #fff;
        font-size: 16px;
        cursor: pointer;
        z-index: 100;
    }
    .addItems1 {
        top: -11px;
    }
    .addItems2 {
        bottom: -11px;
    }
    .handleElement {
        position: absolute;
        width: 100%;
        background-color: transparent;
        z-index: 8;
        right: 0px;
        bottom: -1px;
        top: -1px;
        cursor: move;
    }
}
.active {
    border: 1px dashed #3399ff;
}
</style>